<script setup>
import { ref } from 'vue'
import { getAlarmDetail } from '@/assets/api/api'
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    activeData: {
        type: Object,
        default() {
            return null
        },
    },
})
const emits = defineEmits(['update:visible'])
function closeAction() {
    emits('update:visible', false)
}

// console.log(props.activeData)
const detailData = ref({})
function getData() {
    getAlarmDetail({ id: props.activeData.id }).then((res) => {
        detailData.value = res.data || {}
    })
}
getData()
</script>
<template>
    <!-- :draggable="true" -->
    <el-dialog
        :model-value="visible"
        title="告警详情"
        width="1000px"
        @close="closeAction"
    >
        <table class="detail-table">
            <tbody>
                <tr>
                    <th>告警名称</th>
                    <td>{{ detailData.alarm_type_name || '--' }}</td>
                    <th>告警时间</th>
                    <td>{{ detailData.alarm_time || '--' }}</td>
                </tr>
                <tr>
                    <th>设备名称</th>
                    <td>{{ detailData.device_name || '--' }}</td>
                    <th>位置</th>
                    <td>{{ detailData.position || '--' }}</td>
                </tr>
                <tr>
                    <th>告警内容</th>
                    <td colspan="3">
                        {{ detailData.content || '--' }}
                    </td>
                </tr>
                <tr>
                    <th>告警图片</th>
                    <td colspan="3">
                        <!-- <img
                            style="max-width: 100%"
                            :src="detailData.image_path"
                        /> -->
                        <el-image
                            :zoom-rate="1.2"
                            fit="cover"
                            :src="detailData.image_path"
                            :preview-src-list="[detailData.image_path]"
                        />
                    </td>
                </tr>
            </tbody>
        </table>
    </el-dialog>
</template>
<style lang="scss" scoped>
.detail-table {
    width: 100%;
    th,
    td {
        padding: 20px;
        border: 1px solid #eee;
    }
    th {
        background: #fafafa;
        font-weight: normal;
    }
}
:deep(.el-image){
    width: 300px;
    height: 200px;
}
</style>
